<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@include file="common/head.jsp"%>
<script>
    window.json=null;
    window.json_2=null;
    window.select_labCode=null;
    window.select_labName=null;//该变量作用于第二个界面
    window.select_week=null;
    window.select_week_text=null;
    window.select_week_2=null;
    window.select_week_2_text=null;
    window.select_interval_2=null;
    window.select_interval_2_text=null;
    window.local=null;/*记录目前在那张表*/
    window.userRole=null;//判断用户角色
    window.select_labTag=null;//实验室类型
    window.select_labTag2=null;//第二个界面的实验室类型
</script>
<div class="layui-body" onload="init();">
    <div style="padding: 15px;">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this" onclick="local=0;">按实验室预约</li>
                <li id="tabButton_interval" onclick="local=1;<%--处于按时间预约界面--%>">按时间段预约</li>
            </ul>

            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">

                    <form class="layui-form">
                        <div class="layui-form-item" >
                            <div class="layui-inline">
                                <label>
                                    <select name="lab" lay-filter="select_lab" id="lab_select">
                                        <c:if test="${labDataList!=null}">
                                            <option value="">请选择一个实验室</option>
                                            <optgroup label="15号教学楼(计算机学院)">
                                                <c:forEach items="${labDataList}" var="lab">
                                                    <%--option标签不要换行！--%>
                                                    <option value="${lab.labCode}">${lab.labName}</option>
                                                </c:forEach>
                                            </optgroup>
                                        </c:if>
                                    </select>
                                </label>
                            </div>
                            <%--日期选择器--%>
                            <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="select_week" placeholder="请选择一个时间" readonly>
                                    </div>
                            </div>
                        </div>
                    </form>
                    <!--lab表建立-->
                    <table  lay-filter="lab_table" id="lab_table"></table>
                </div>

                <div class="layui-tab-item">
                    <form class="layui-form" action="">
                        <div class="layui-form-item" >
                            <div class="layui-inline">
                                    <%--日期选择器--%>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" id="select_week_2" placeholder="请选择一个时间"
                                                   readonly>
                                        </div>
                            </div>

                            <div class="layui-inline">
                                <label>
                                    <select name="interval" lay-filter="select_interval_2" id="interval_select_2">
                                        <option value="">请选择一个时间段</option>
                                        <optgroup label="时间段">
                                            <option value="one">1-2节课</option>
                                            <option value="two">3-4节课</option>
                                            <option value="three">5-6节课</option>
                                            <option value="four">7-8节课</option>
                                            <option value="five">9-10节课</option>
                                        </optgroup>
                                    </select>
                                </label>
                            </div>
                        </div>
                    </form>

                    <!--time表建立-->
                    <table  lay-filter="time_table" id="time_table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<%--生成与查询--%>
<script type="text/javascript">
    /*初始化table*/
    function init(){
        local=0;/*实验室预约界面*/
        //设置
        checked = sessionStorage.getItem("checked");
        checkCounts = sessionStorage.getItem("checkCounts");
        if (checked === "no" && checkCounts != "0") {
            $('#redPoint').attr("class",'layui-badge');
            /*红点显示*/
            document.getElementById('redPoint').innerText=checkCounts;
            show(checkCounts);
        }

        render();
        render2();
        $.ajax({
            type:"POST",
            url: "${pageContext.request.contextPath}/login.do",
            data: {method: "getRootMsg"},
            dataType: "json",
            success: function (data) {
                userRole=data.role;
            }
        })
    }
    window.onload=init;
    /*获取下拉菜单数据*/
    layui.use(['form','table'],function () {
        let form = layui.form;
        form.on('select(select_lab)', function(data){
            select_labCode=data.value;
            /*获取选中项内容*/
           select_labName=$('#lab_select option:selected').text();
            /*存在两次点击提示栏的可能*/
            if (select_labCode!=null && select_week!=null && select_labCode!="" && select_week!=""){
                render();
            }

        });

    })
    /*查询数据*/
    function render(){
        let table = layui.table;
        table.render({
            elem: '#lab_table'
            ,size: 'lg'
            ,even: true
            ,skin: 'row'
            , cols: [[
                {
                    field: 'interval'
                    , title: '开放时段'
                    , width: '20%'
                    , unresize: 'true'
                }
                , {
                    field: 'capacity'
                    , title: '余量'
                    , width: '20%'
                    , unresize: 'true'
                }
                , {
                    field: 'open'
                    , title: '是否开放'
                    , width: '25%'
                    , unresize: 'true'
                    , templet: '#openTpl'
                }
                , {
                    field: 'operation'
                    , title: '申请操作'
                    , unresize: 'true'
                    , toolbar: '#apply'
                }
            ]]
            ,url:'${pageContext.request.contextPath}/jsp/apply.do?method=getLabWeekDataByLabName&labCode='+select_labCode+'&week='+select_week
            ,parseData:function (res) {
                return{
                    code:0
                    ,msg:"获取数据成功"
                    ,count:5/*lab_table表只能有5行*/
                    ,data:res.data
                }
            }
        });
        $.ajax({
            type:"POST"
            ,url:"${pageContext.request.contextPath}/jsp/user.do?method=getLabDataByLabCode&labCode="+select_labCode
            ,dataType: "json"
            ,success:function (data) {
                select_labTag=data.labData.labTag;
            }
        })
    }

    /*获取下拉菜单数据*/
    layui.use(['form','table'],function () {
        let form = layui.form;
        form.on('select(select_interval_2)', function(data){
            select_interval_2=data.value;
            select_interval_2_text=$('#interval_select_2 option:selected').text();
            if (select_interval_2!=null && select_week_2!=null && select_interval_2!="" && select_week_2!=""){
                render2();
            }
        });

    })
    /*查询数据*/
    function render2(){
        let table = layui.table;
        table.render({
            elem: '#time_table'
            ,size: 'lg'
            ,even: true
            ,skin: 'row'
            ,page:true
            ,limit:5
            ,limits:[1,5]
            ,autoSort: false
            , cols: [[
                {
                    field: 'lib'
                    , title: '实验室'
                    , width: '20%'
                    , unresize: 'true'
                }
                , {
                    field: 'capacity'
                    , title: '余量'
                    , width: '20%'
                    , unresize: 'true'
                }
                , {
                    field: 'open'
                    , title: '是否开放'
                    , width: '25%'
                    , unresize: 'true'
                    , templet: '#openTpl'

                }
                ,{
                    field:'operation'
                    ,title: '申请操作'
                    ,unresize: 'true'
                    , toolbar: apply
                }
            ]]
            ,url:'${pageContext.request.contextPath}/jsp/apply.do?method=getLabIntervalData&week='+select_week_2+'&interval='+select_interval_2
            ,parseData:function (res) {
                let result;
                if(this.page.curr){
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    result=res.data.slice(0,this.limit);
                }
                return{
                    "code":0
                    ,"data":result
                    ,"count": res.total
                }
            }
        });
    }
</script>
<%--弹窗数据回显及操作--%>
<script type="text/javascript">
    layui.use('table', function () {
        let table = layui.table;
        table.on('tool(lab_table)', function (obj) {
            let data = obj.data;
            json = JSON.stringify(data);
            if (obj.event === 'apply1') {
                if (data.open === '是'&&select_labTag === 0){
                    apply1();
                }else if(data.open ==='是'&&select_labTag === 1){
                    if (userRole === 1){
                        apply1();
                    }else {
                        layer.msg('这是专业实验室，您的权限不能申请，请选择其他实验室！🙅‍♀️🙅🏻‍♂️❌');
                    }
                }else {
                    layer.msg('你选择的时段，实验室不开放哦！🙅‍♀️🙅🏻‍♂️❌');
                }
            }else if (obj.event === 'details'){
                /*容量！！类型！！*/
                details();
            }
        })

        table.on('tool(time_table)', function (obj) {
            let linedata = obj.data;/*为了防止与ajax中的data重名这里改成linedata*/
            json_2 = JSON.stringify(linedata);
            select_labName=linedata.lib;
            $.ajax({
                type:"POST"
                ,url:"${pageContext.request.contextPath}/jsp/user.do?method=getLabDataByLabName&labName="+select_labName
                ,dataType: "json"
                ,success:function (data) {
                    select_labTag2=data.labData.labTag;
                    if (obj.event === 'apply1') {
                        if (linedata.open === '是'&&select_labTag2 === 0){
                            apply1();
                        }else if(linedata.open ==='是'&&select_labTag2 === 1){
                            if (userRole === 1){
                                apply1();
                            }else {
                                layer.msg('这是专业实验室，您的权限不能申请，请选择其他实验室！🙅‍♀️🙅🏻‍♂️❌');
                            }
                        }else {
                            layer.msg('你选择的时段，实验室不开放哦！🙅‍♀️🙅🏻‍♂️❌');
                        }
                    }else if (obj.event === 'details'){
                        /*容量！！类型！！*/
                        details();
                    }
                }
            })
        })
    });
</script>
<%--动态设置单元格格式--%>
<script type="text/html" id="openTpl">
    {{#  if(d.open === '是'){ }}
    <input type="checkbox" name="status" id="switch_open" lay-skin="switch" lay-text="开放中|未开放" lay-event="close" lay-filter="switch" checked >
    {{#  } else { }}
    <input type="checkbox" name="status" id="switch_open" lay-skin="switch" lay-text="开放中|未开放" lay-filter="switch" lay-event="open">
    {{#  } }}
</script>
<%--彩蛋：防止用户修改是否开放按钮--%>
<script type="text/javascript">
    layui.use('form', function () {
        let form = layui.form;
        form.on('switch(switch)', function (data) {
            let swt = $(data.elem);
            swt.prop('checked',!data.elem.checked);
            layui.form.render();
            layui.use('layer',function(){
                var layer=layui.layer;
                layer.msg('达咩，不可以呦~',{icon:2,time:2000, shift: 6});
            })
        });
    })
</script>
<%--时间选择器--%>
<script type="text/javascript">
    layui.use('laydate', function() {
        let laydate = layui.laydate;
        laydate.render({
            elem: '#select_week'
            , min: 1
            , max: 6
            ,trigger:'click'
            ,theme: 'molv'
            ,btns: ['clear', 'confirm']
            ,done: function (value) {
                select_week = getWeek(value);
                select_week_text=value;
                if (select_labCode!=null && select_week!=null && select_labCode!="" && select_week!=""){
                    render();
                }
            }
        });
    });

    layui.use('laydate', function() {
        let laydate = layui.laydate;
        laydate.render({
            elem: '#select_week_2'
            , min: 1
            , max: 7
            ,trigger:'click'
            ,theme: 'molv'
            ,btns: ['clear', 'confirm']
            ,done: function (value) {
                select_week_2 = getWeek(value);
                select_week_2_text=value;
                if (select_interval_2!=null && select_week_2!=null && select_interval_2!="" && select_week_2!=""){
                    render2();
                }
            }
        });
    });
    /*小提示*/
    $('#select_week').on('click', function(){
        let that = this;
        layer.tips('请选择除今天以外，未来6天内的一天', that,{ tips: [1, '#009688'],time:2500});
    });
    $('#select_week_2').on('click', function(){
        let that = this;
        layer.tips('请选择除今天以外，未来6天内的一天', that,{ tips: [1, '#009688'],time:2500});
    });
    /*获取网络北京时间*/
    function getNowFormatDate() {
        var currentdate;
        $.ajax({
            type: 'GET',
            dataType: 'json',
            async: false,
            url: 'http://quan.suning.com/getSysTime.do',
            success: function (data) {
                var data = data.sysTime2;
                currentdate = data.slice(0, 16);
            }
        });
        return currentdate
    }
    /*将具体日期转换为week*/
    function getWeek(date) {
        switch (new Date(date).getDay()) {
            case 0:return 'sun';
            case 1:return 'mon';
            case 2:return 'tue';
            case 3:return 'wed';
            case 4:return 'thur';
            case 5:return 'fri';
            case 6:return 'sat';
            default:return null;
        }
    }
</script>
<%@include file="/jsp/user/common/foot.jsp" %>
<script type="text/javascript" id="apply">

    <a class="layui-btn layui-btn-radius layui-btn-normal" lay-event="details">
        <i class="layui-icon">&#xe670;</i> 详情
    </a>

    <a class="layui-btn layui-btn-radius layui-btn-warm" lay-event="apply1">
        <i class="layui-icon">&#xe624;</i> 预约</a>
</script>
<script>
    function details(){
        parent.layer.open({
            type: 2,//1：直接写面板 2：链接面板
            title: '实验室详情',
            shadeClose: true,
            skin: 'yourclass',
            content: "<%=path%>/jsp/user/eject/details.jsp",//链接面板
            area: ['30%', '50%'],//面板大小
            anim:5,
        })
    }

    function apply1(){
        parent.layer.open({
            type: 2,//2.iframe
            title: '预约实验室',
            shadeClose: true,
            skin: 'yourclass',
            content: "<%=path%>/jsp/user/eject/apply1.jsp",//链接面板
            area: ['35%', '78%'],//面板大小
            anim:5,
        })
    }

</script>
<%--申请审批结果提示--%>
<script type="text/javascript">
    function show(checkCount) {
        //弹窗
        layer.open({
            type: 1
            ,title:"<i class='layui-icon' style='color: #ff0000'>&#xe617;</i>申请结果提示"
            ,offset: ['61.8%','80.8%']
            ,content: '<div style="padding:30px 30px ">您有<span style="color: red">'+checkCount+'</span>条申请已经被审批</br>请进入“申请进度查询”模块，查询结果</div>'
            ,btn:'进入查询'
            ,btnAlign: 'c' //按钮居中
            ,shade: 0 //不显示遮罩
            ,yes:function () {
                sessionStorage.setItem("checked","yes");
                window.location.href="<%=path%>/jsp/user/progress.jsp";
            }
        });
    }
</script>